<template>
    <div class="show-b-title">
        <span>
            <i v-if='icon == 1' class="fa fa-window-minimize" aria-hidden="false"></i>
            <i v-if='icon == 2' class="fa fa-volume-up" aria-hidden="true"></i>
            <i v-if='icon == 3' class="fa fa-caret-right" aria-hidden="true"></i>
        </span>
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'showBooksTitle',
    props: {
        icon: Number,
    }
}
</script>

<style lang="scss">
.show-b-title {
    vertical-align: middle;
    margin: 15px 15px 0 15px;
    font-size: 18px;
    i {
        color: #E95E56;
    }
    .fa-window-minimize {
        transform: rotate(90deg);
        margin-right: -10px;
    }
    .fa-caret-right {
        font-size: 0.6rem;
    }
}
</style>